import { Outlet ,Link, useNavigate} from "react-router-dom"
import React, { useEffect, useState } from 'react';
import { EnvironmentOutlined, RightOutlined, ReconciliationFilled, ShoppingFilled, RedditCircleFilled, CompassFilled  } from '@ant-design/icons';
import { getUser2Djm } from "../api/api";
function ZhongXin() { 
  const [user,setUser]  = useState({})
  const phone = sessionStorage.getItem('user')
  const navigate = useNavigate()
  useEffect(()=>{
    getUser2Djm(phone).then(res=>setUser(res.data))
  },[])
  return(
    <div>
      <p style={{textAlign:'center',height:'50px',lineHeight:'50px'}}>彩中心</p>
      <div >
        <div style={{width:'100%',height:'80px',display:'flex',justifyContent: 'space-between'}}>
          <div  style={{width:'23%',height:'100%',margin:'0 10px',boxSizing:'border-box',borderRadius:'50%',overflow:'hidden'}}><Link to='/geren' ><img src={user.img} alt="" style={{width:'100%',height:'100%'}}/></Link></div>
          <div style={{width:'45%',height:'100%',display:'flex',flexDirection: 'column',justifyContent: 'space-around'}}>
            <div>{user.userName}</div>
            {user.ren == 'false' ? <div onClick={()=>{
                navigate('/renzheng/'+user.id)
            }}>点击认证</div> : <div>认证成功</div>}
          </div>
          <div style={{width:'25%',height:'100%',display:'flex',flexDirection: 'column',justifyContent: 'space-around'}}>
            <div>积分钱包</div>
            <div>{user.points}</div>
          </div>
        </div>


        <div style={{width:'100%',height:'200px',display:'flex',flexDirection: 'column',justifyContent: 'space-around'}}>
          <Link to="/dizhi" style={{color:'black',textDecoration:'none'}}>
            <div style={{width:'100%',display:'flex',alignItems: 'center',justifyContent: 'space-around'}}>
              <EnvironmentOutlined color="#e98f36" />
              <div style={{width:'66%'}}>收货地址</div>
              <RightOutlined />
            </div>
          </Link>
          <Link to="/dinglist" style={{color:'black',textDecoration:'none'}}>
            <div style={{width:'100%',display:'flex',alignItems: 'center',justifyContent: 'space-around'}}>
              <ReconciliationFilled color="#e98f36"/>
              <div style={{width:'66%'}}>我的订单</div>
              <RightOutlined />
            </div>
          </Link>
          <Link to="/woshangpin" style={{color:'black',textDecoration:'none'}}>
            <div style={{width:'100%',display:'flex',alignItems: 'center',justifyContent: 'space-around'}}>
              <ShoppingFilled color="#e98f36"/>
              <div style={{width:'66%'}}>我发布的商品</div>
              <RightOutlined />
            </div>
          </Link>
          <Link to="/wohuodong" style={{color:'black',textDecoration:'none'}}>
            <div style={{width:'100%',display:'flex',alignItems: 'center',justifyContent: 'space-around'}}>
              <RedditCircleFilled color="#e98f36"/>
              <div style={{width:'66%'}}>我发布的活动</div>
              <RightOutlined />
            </div>
          </Link>
        </div>
        
        <Link to="/guanyu" style={{color:'black',textDecoration:'none'}}>
          <div style={{width:'100%',height:'50px',display:'flex',alignItems: 'center',justifyContent: 'space-around'}}>
            <CompassFilled color="#e98f36"/>
            <div style={{width:'66%'}}>关于彩蛋校园</div>
            <RightOutlined />
          </div>
        </Link>



      </div>
    </div>
  )
}
export default ZhongXin